import React, { Component } from 'react';

import store from './store';

import TodolistUi from './TodolistUi';

import {
	inputChangeAction,
	addItemAction,
	delItemAction,
} from './store/actionCreators'


class TodoList extends Component {
	constructor(props) {
		super(props)
		this.state = store.getState()
	}

	cancelSub = () => {}

	componentDidMount() {
		this.cancelSub = store.subscribe(this.storeChange)
	}

	componentWillUnmount() {
		this.cancelSub()
	}

	render() {
		let { inputValue, list } = this.state
        return (
			<TodolistUi
				inputValue={inputValue}
				list={list}
				inputChange={this.inputChange}
				clickBtn={this.clickBtn}
				delEvent={this.delEvent}
			/>
		)
	}

	storeChange = () => {
		this.setState(store.getState())
	}

	inputChange = (e) => {
		let action = inputChangeAction(e.target.value)
		store.dispatch(action)
	}
	clickBtn = () => {
		let action = addItemAction()
		store.dispatch(action)
	}
    delEvent = (i) => {
        console.log(i);
        let action = delItemAction(i)

        store.dispatch(action)
    }
}
 
export default TodoList;